<script setup>
import { ref, computed, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import analyzeData from '../../apis/anlyze.js'

const { t } = useI18n()

const showDrawer = computed({
  get: () => props.flag,
  set: (flag) => emits('update:flag', flag)
})

const userInfo = ref({})

const emits = defineEmits(['update:flag'])
const props = defineProps({
  userId: {
    type: String,
    required: true,
  },
  flag: {
    type: Boolean,
    default: true
  }
})

const fetchData = async (userId) => {
  try {
    const res = await analyzeData.getElderlyTaskList({userId})
    userInfo.value = res
  } catch (err) {
    console.error(t('getElderlyDataFailed'), err)
  }
}

watch(
    () => props.userId,
    async (newUserId) => {
      if (newUserId) {
        console.log(t('received') + ' userId:', newUserId)
        await fetchData(newUserId)
      }
    },
    { immediate: true }
)
</script>

<template>
  <el-drawer v-model="showDrawer" :title="$t('elderlyDetails')" direction="rtl" size="50%" class="custom-drawer">
    <el-descriptions :column="2" border class="custom-descriptions">
      <el-descriptions-item :label="$t('name')">{{ userInfo.elderlyName }}</el-descriptions-item>
      <el-descriptions-item :label="$t('idNumber')">{{ userInfo.elderlyId }}</el-descriptions-item>
      <el-descriptions-item :label="$t('age')">{{ userInfo.age }}</el-descriptions-item>
      <el-descriptions-item :label="$t('gender')">{{ userInfo.gender }}</el-descriptions-item>
      <el-descriptions-item :label="$t('residence')">{{ userInfo.residence }}</el-descriptions-item>
      <el-descriptions-item :label="$t('contactNumber')">{{ userInfo.contactNumber }}</el-descriptions-item>
      <el-descriptions-item :label="$t('livingAlone')">{{ userInfo.isLivingAlone ? $t('yes') : $t('no') }}</el-descriptions-item>
      <el-descriptions-item :label="$t('selfCareAbility')">{{ userInfo.canSelfCare ? $t('yes') : $t('no') }}</el-descriptions-item>
      <el-descriptions-item :label="$t('familyPhone')">{{ userInfo.familyContactNumber || $t('none') }}</el-descriptions-item>
      <el-descriptions-item :label="$t('disease')">{{ userInfo.medicalConditions || $t('none') }}</el-descriptions-item>
    </el-descriptions>

    <div class="task-section">
      <h4>{{ $t('taskRecord') }}：</h4>
      <el-collapse accordion v-if="userInfo.tasks?.length">
        <el-collapse-item
            v-for="(task, index) in userInfo.tasks"
            :key="task.taskId"
            :title="task.taskTitle"
            :name="index"
            class="task-collapse-item"
        >
          <el-descriptions :column="1" class="task-descriptions">
            <el-descriptions-item :label="$t('creationTime')">{{ task.createdAt }}</el-descriptions-item>
            <el-descriptions-item :label="$t('taskContent')">{{ task.taskContent }}</el-descriptions-item>
            <el-descriptions-item :label="$t('receiverId')">{{ task.receiverId || $t('none') }}</el-descriptions-item>
            <el-descriptions-item :label="$t('receiverName')">{{ task.receiverName }}</el-descriptions-item>
          </el-descriptions>
        </el-collapse-item>
      </el-collapse>
      <p v-else class="no-task-tip">{{ $t('noTaskRecord') }}</p>
    </div>
  </el-drawer>
</template>

<style scoped>
.custom-drawer {
  padding: 24px 32px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.custom-drawer >>> .el-drawer__header {
  font-weight: 700;
  font-size: 22px;
  padding-bottom: 12px;
  border-bottom: 1px solid #ebeef5;
}

.custom-descriptions {
  font-size: 14px;
  color: #333;
  margin-bottom: 24px;
}

.custom-descriptions >>> .el-descriptions-item__content {
  color: #555;
}

.task-section h4 {
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 12px;
  color: #a4a8b4;
}

.task-collapse-item >>> .el-collapse-item__title {
  font-weight: 600;
  font-size: 16px;
  color: #1c1f26;
}

.task-descriptions {
  font-size: 13px;
  color: #666;
}

.no-task-tip {
  text-align: center;
  color: #999;
  font-style: italic;
  margin-top: 20px;
}
</style>
